<template>
  <div id="container"></div>
</template>

<script lang="ts">
export default {
  name: "BMap",
};
</script>

<script lang="ts" setup>
import { onMounted } from "vue";

onMounted(() => {
  const script = document.createElement("script");

  script.src =
    "https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=tGBdD6jLb0ELFQZQeVhwY9iaye5Ui1Gq&callback=initMap";

  window.initMap = () => {
    //创建地图实例
    const map = new BMapGL.Map("container");
    //设置中心点位置
    const point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);

    var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);
  };
  document.body.appendChild(script);
});
</script>

<style scoped>
#container {
  height: 600px;
}
</style>
